<template>
	<view class="wrap-order-status flex" :style="'top:' + navigationHeight + 'px;'">
		<block v-for="(item, index) in tab_list" :key="index">
			<view class="status-item flex align-center just-center" @click="onTab(index)">
				<view :class="{ active: item.status === status }">
					{{ item.title }}
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 状态
			 */
			status: {
				type: String,
				default: "",
			},
			/**
			 * 用户状态 1:普通用户 2:技师
			 */
			userStatus: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				navigationHeight: this.$navigationHeight,
			};
		},
		mounted() {
			if (this.userStatus === 1) {
				this.tab_list = [
					{ title: "全部订单", status: "0" },
					{ title: "待支付", status: "1" },
					{ title: "待服务", status: "2" },
					{ title: "服务中", status: "6" },
					{ title: "已完成", status: "7" },
				];
			} else if (this.userStatus === 2) {
				this.tab_list = [
					{ title: "待接单", status: "2" },
					{ title: "待服务", status: "3" },
					{ title: "服务中", status: "4" },
					{ title: "已完成", status: "7" },
				];
			}
		},
		data() {
			return {
				navigationHeight: this.$navigationHeight,
				tab_list: [], //列表
			};
		},
		methods: {
			/**
			 * 切换状态
			 */
			onTab(index) {
				const status = this.tab_list[index].status;
				if (status === this.status) return;
				this.$emit("update:status", status);
				this.$emit("onRefresh");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-order-status {
		position: sticky;
		left: 0;
		width: 100%;
		overflow: hidden;
		height: 100rpx;
		background: white;
		z-index: 10;
		flex-wrap: wrap;

		.status-item {
			flex: 1;
			height: 100rpx;
			overflow: hidden;

			> view {
				display: inline-block;
				height: 100rpx !important;
				line-height: 100rpx;
				box-sizing: border-box;
				border-bottom: 6rpx solid white;
			}

			.active {
				border-color: $theme-color;
			}
		}
	}
</style>
